<template>
  <div class="search-result-pages px-4">
    <div v-for="item in resultData" :key="item.name" class="mb-6">
      <div class="flex justify-start">
        <div class="relative">
          <img :src="baseUrl + item.url" alt="" class="w-[132px] h-[176px] rounded-lg" />
          <div v-if="item.free" class="free">免费</div>
          <div v-else class="gold">
            <dollar-outlined class="gold-icon" />
            <span>100</span>
          </div>
        </div>
        <div class="pl-2 relative">
          <h3 class="text-base">{{ item.name }}</h3>
          <div v-if="type === 'video'" class="text-xs text-[#8f9299]">
            <span class="block mb-2">{{ item.language }}</span>
            <span class="truncate inline-block w-[198px]">{{ item.actor }}</span>
          </div>
          <div v-if="type === 'novel'" class="text-xs text-[#8f9299]">
            <span class="block mb-2">作者：{{ item.author }}</span>
            <span class="inline-block w-[198px]">{{ item.content }}</span>
          </div>
          <div v-if="type === 'atlas'" class="text-xs text-[#8f9299]">
            <span class="block mb-2">{{ item.language }}</span>
          </div>
          <div class="cms-button absolute bottom-0 left-2">
            <div class="play-button">
              <caret-right-outlined v-if="type === 'video'" style="align-self: center" class="text-white" />
              <p class="play-text">{{ type === 'video' ? '立即播放' : type === 'novel' ? '立即阅读' : '立即查看' }}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="type === 'video' && item.videoType === 2" class="episode flex mt-4">
        <span v-for="i in 2" :key="i">{{ i }}</span>
        <span>...</span>
        <span v-for="v in [18, 19, 20]" :key="v">{{ v }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CaretRightOutlined } from '@ant-design/icons-vue'
const baseUrl = '/src/components/cms/components/src/'
interface ResultList {
  url: string
  name: string
  videoType?: number
  language?: string
  actor?: string
  free: boolean
  author?: string
  content?: string
}

const props = withDefaults(defineProps<{ type: string; resultData: ResultList[] }>(), { type: 'video' })
</script>

<style scoped lang="less">
.search-result-pages {
  .cms-button {
    .play-text {
      text-align: center;
      font-size: 14px;
      line-height: 14px;
      color: #ffffff;
      font-weight: 400;
      align-self: center;
    }
    .play-button {
      width: 90px;
      height: 32px;
      background-image: linear-gradient(135deg, #ffa45d 0%, #ff613f 100%);
      border-radius: 6px;
      @apply flex justify-center;
    }
  }
  .episode {
    @apply mb-6;
    span {
      @apply inline-block mr-2 text-center rounded-lg font-medium text-lg text-[#48494d];
      width: 50px;
      height: 53px;
      line-height: 53px;
      background: #f6f7f9;
    }
  }
  .free {
    width: 36px;
    height: 20px;
    background-image: linear-gradient(135deg, #ffa45d 0%, #ff613f 100%);
    border-radius: 0 8px 0 8px;
    font-size: 12px;
    color: #ffffff;
    padding: 2px 6px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .gold {
    // width: 48px;
    height: 20px;
    background-image: linear-gradient(135deg, #eed78e 0%, #cbae6c 100%);
    border-radius: 0 8px 0 8px;
    font-size: 12px;
    color: #ffffff;
    padding: 2px 6px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .gold-icon {
    margin-right: 2px;
    font-size: 14px;
  }
}
</style>
